<template>
  <!-- 相册 -->
  <div class="album">
    <div class="title">相册</div>
    <div class="desc">每一个精彩的瞬间都值得被记录</div>

    <ProgressSpinner
      v-if="progress"
      style="width: 50px; height: 50px; display: flex; justify-content: center"
      strokeWidth="8"
      fill="transparent"
      animationDuration=".5s"
      aria-label="Custom ProgressSpinner"
    />

    <div class="body" v-else>
      <el-timeline style="max-width: 650px">
        <el-timeline-item
          v-for="item in albumList"
          :key="item.id"
          center
          :timestamp="item.createTime"
          placement="top"
          type="primary"
          color="#b1e5f1"
        >
          <el-image
            v-for="(photo, index) in item.photos"
            :key="photo.id"
            :src="photo.url"
            :preview-src-list="item.photos.map((item) => item.url)"
            :initial-index="index"
            loading="loazy"
            :lazy="true"
          >
            <template #error>
              <div class="image-slot">
                <el-icon><icon-picture /></el-icon>
              </div>
            </template>
          </el-image>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="page">
      <el-pagination
        v-model:current-page="pageQuery.page"
        :page-size="pageQuery.pageSize"
        :disabled="false"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { getPageAlbumListService } from "@/api/Album";
import { onMounted, ref } from "vue";
import { Picture as IconPicture } from "@element-plus/icons-vue";

const progress = ref(true);

const total = ref(0);
const pageQuery = ref({
  page: 1,
  pageSize: 4,
});

// 相册数据
const albumList = ref([]);

const handleSizeChange = (pageSize) => {
  pageQuery.value.pageSize = pageSize;
  getAlbumList(pageQuery.value);
};
const handleCurrentChange = (page) => {
  pageQuery.value.page = page;
  getAlbumList(pageQuery.value);
};

const getAlbumList = async (query) => {
  await getPageAlbumListService(query).then(({ data }) => {
    progress.value = false;
    albumList.value = data.records;
    total.value = data.total;
    console.log(data);
  });
};

onMounted(() => {
  getAlbumList(pageQuery.value);
});
</script>
<style lang="scss" scoped>
.album {
  height: 102.5vh;
  overflow: auto;
  scrollbar-width: none;
  padding: 24px;
  background-color: #fff;
  border-radius: 0px 0px 12px 12px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);

  .title {
    font-size: 26px;
    font-weight: 500;
  }
  .desc {
    font-size: 13px;
    color: #727171c5;
  }

  .body {
    margin-top: 36px;
    padding: 0px 0px 0px 30px;

    :deep(.el-image) {
      margin-right: 10px;
      width: 180px;
      border-radius: 7px;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      :deep(.el-image) {
        margin-right: 10px;
        width: 100%;
        border-radius: 7px;
        cursor: pointer;
      }
    }
  }

  .page {
    display: flex;
    justify-content: end;
  }
}
</style>